import { useState } from 'react';
import logo from './logo.svg';
import WebVitals from './lib/webvitals';
import UserVitals from './lib/userVitals';
import ErrorVitals from './lib/errorVitals';
import './App.css';
import { Route, Router } from 'react-router';

let timing =
  // W3C Level2  PerformanceNavigationTiming
  // 使用了High-Resolution Time，时间精度可以达毫秒的小数点好几位。
  performance.getEntriesByType('navigation').length > 0
    ? performance.getEntriesByType('navigation')[0]
    : performance.timing; // W3C Level1  (目前兼容性高，仍然可使用，未来可能被废弃)。
const webvital = new WebVitals(timing);
const userVitals = new UserVitals(timing);
const errorVitals = new ErrorVitals(timing, { Vue: '' });
const value = webvital.metrics;
// setTimeout(() => {
//   /*
//   这个为什么是setTimeout呢, 因为在new webVital的时候,init一堆东西,是异步的,所以得
//   等数据加载完了才能输出, 直接拿不到, 得等数据获取之后, 所以等1秒
//   */
//   console.log("原本的",value.state)
//   console.log("转换之后的",value.getValues())
// }, 3000);
// console.log(timing);
// console.log(webvital.metrics.state);
// console.log(userVitals.metrics.state)
function App() {
  const [hellow, seHellow] = useState('');
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className='App-link'
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        ></a>
        <button onClick={() => seHellow('hhh')}>{hellow}</button>
      </header>
    </div>
  );
}

export default App;
